<template>
  <div
    id="home-sub-success-view"
    class="container-fluid"
  >
    <live-online-classes-promotion-modal
      v-if="showLocModal"
      @close="showLocModal = false"
    />
    <div class="container">
      <div class="head text-center">
        <h2 class="success-text">
          Congratulations, Payment Successful!!!
        </h2>
        <h3 class="processed">
          Your Premium access is being processed...
        </h3>
      </div>
      <div class="section">
        As a next step, we will grant you a premium access which typically takes around <b>2-5 minutes</b> after the payment has been successful.
      </div>
      <div class="section">
        You will also <b>receive an email</b> once premium access has been granted. Please <b>refresh</b> the page once you get the email to access premium levels and buy hero, pets or gear.
      </div>
      <div class="section">
        Thank you for choosing CodeCombat and you can always reach us with any questions at <a href="mailto:support@codecombat.com">support@codecombat.com</a>
      </div>
    </div>
  </div>
</template>

<script>
import LiveOnlineClassesPromotionModal from '../parents/LiveOnlineClassesPromotionModal.vue'
const paymentUtils = require('app/lib/paymentUtils')
export default {
  name: 'PaymentHomeSubscriptionsSuccessView',
  components: {
    LiveOnlineClassesPromotionModal
  },
  props: {
    amount: {
      type: String
    },
    duration: {
      type: String // possible values: one_time, x_month, y_year
    }
  },
  data () {
    return {
      showLocModal: true
    }
  },
  created () {
    if (!paymentUtils.hasTemporaryPremiumAccess() && !me.hasSubscription()) { paymentUtils.setTemporaryPremiumAccess() }
    // TODO: should include properties in this format: { value: '0.00', currency: 'USD', predicted_ltv: '0.00' }
    const options = paymentUtils.getTrackingData({ amount: this.amount, duration: this.duration })
    if (!paymentUtils.hasTrackedPremiumAccess()) {
      window.tracker.trackEvent('Home subscription purchase success', options)
      paymentUtils.setTrackedPremiumPurchase()
    }
  }
}
</script>

<style scoped lang="sass">
.section
  padding: 10px 12%
.success-text
  color: green
.processed
  color: grey
</style>
